<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>客服中心</title>
    <link rel="stylesheet" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="plugins/sub-menu.css">

    <!-- <link rel="stylesheet" type="text/css" href="plugins/css/bootstrap.min.css">     -->
    <link rel="stylesheet" type="text/css" href="plugins/zw/css/style.css">    
    <link rel="stylesheet" type="text/css" href="plugins/zw/css/jquery.mobile.flatui.css" />
    <style>
        #touxiang{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
        
    </style>
</head>
<body>
    <!-- 导航 -->
    <div class="container-fluid">
        <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid"> 
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">衣二三</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span>登陆</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal1"><span class="glyphicon glyphicon-check"></span>注册</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>我的购物车</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-folder-open"></span>收藏</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-off"></span>安全退出</a></li> 
                    
                    <!-- 在用框架的使用，任何一个标签都会存在一些样式 -->
                    <li><img src="images/头像.png" id="touxiang"></li>
                </ul>
            </div>
            </div>
        </nav>
        </div>
    </div>
    <!-- 登录模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              用户登陆入口
            </h4>
          </div>
          <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                          <label for="firstname" class="col-sm-2 control-label">用户名</label>
                          <div class="col-md-6">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                          </div>
                        </div>
                        <div class="form-group has-feedback">
                          <label for="lastname" class="col-sm-2 control-label">密码</label>
                          <div class="col-md-6">
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox">请记住我
                              </label>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">登录</button>
                          </div>
                        </div>
                      </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>

    <!-- 注册模态框 -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              用户注册入口
            </h4>
          </div>
          <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                          <label for="firstname" class="col-sm-2 control-label">用户名</label>
                          <div class="col-md-6">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                          </div>
                        </div>
                        <div class="form-group has-feedback">
                          <label for="lastname" class="col-sm-2 control-label">密码</label>
                          <div class="col-md-6">
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                          </div>
                        </div>
                        <!-- <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox">请记住我
                              </label>
                            </div>
                          </div>
                        </div> -->
                        <div class="form-group">
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">注册</button>
                          </div>
                        </div>
                      </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>

    <!-- 主体内容 -->
    <div class="container-fluid" style="background-color: #fff;background-image: url(plugins/zw/bg.jpg);"> 

    
        <div class="container-fluid" >
            <div class="row">
                <div class="col-md-9"></div>
                <div class="col-md-3" style="margin-left: 1050px;">
                    <img src="plugins/zw/客服log.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="container" style="margin-left: -180px;margin-top: -100px;">

            <!-- <div data-role="page" style="border: 1px solid red ;" > -->
                
                <div data-role="content" class="container" role="main" style="width: 800px;background-color:#fff;">
                    <ul class="content-reply-box mg10">
                        <li class="odd">
                            <a class="user" href="#"><img class="img-responsive avatar_" src="plugins/zw/avatar.png" alt=""><span class="user-name">客服中心机器人</span></a>
                            <div class="reply-content-box">
                                <span class="reply-time">12月25日 15：00</span>
                                <div class="reply-content pr">
                                    <span class="arrow">&nbsp;</span>
                                    Hi，有什么可以帮助你的？
                                </div>
                            </div>
                        </li>
                        <li class="even">
                            <a class="user" href="#"><img class="img-responsive avatar_" src="plugins/zw/avatar.png" alt=""><span class="user-name">我</span></a>
                            <div class="reply-content-box">
                                <span class="reply-time">03-08 15：10</span>
                                <div class="reply-content pr">
                                    <span class="arrow">&nbsp;</span>
                                    如何修改订单地址？
                                </div>
                            </div>
                        </li>
                        <li class="odd">
                            <a class="user" href="#"><img class="img-responsive avatar_" src="plugins/zw/avatar.png" alt=""><span class="user-name">客服中心机器人</span></a>
                            <div class="reply-content-box">
                                <span class="reply-time">03-08 15：20</span>
                                <div class="reply-content pr">
                                    <span class="arrow">&nbsp;</span>
                                    亲，人家没看懂啦，再说说遇到什么问题了呐
                                </div>
                            </div>
                        </li>
                        <li class="even">
                            <a class="user" href="#"><img class="img-responsive avatar_" src="plugins/zw/avatar.png" alt=""><span class="user-name">我</span></a>
                            <div class="reply-content-box">
                                <span class="reply-time">03-08 15：30</span>
                                <div class="reply-content pr">
                                    <span class="arrow">&nbsp;</span>
                                    如何退款？
                                </div>
                            </div>
                        </li>
                        <li class="odd">
                            <a class="user" href="#"><img class="img-responsive avatar_" src="plugins/zw/avatar.png" alt=""><span class="user-name">客服中心机器人</span></a>
                            <div class="reply-content-box">
                                <span class="reply-time">03-08 15：20</span>
                                <div class="reply-content pr">
                                    <span class="arrow">&nbsp;</span>
                                    亲，人家没看懂啦，再说说遇到什么问题了呐
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="operating row text-center linear-g">
                        <li class="col-xs-4"><a href="#"><span class="glyphicon glyphicon-tags"></span> &nbsp;标签</a></li>
                        <li class="col-xs-4"><a href="#"><span class="glyphicon glyphicon-comment"></span> &nbsp;回复</a></li>
                        <li class="col-xs-4"><a href="#"><span class="glyphicon glyphicon-heart"></span> &nbsp;喜欢</a></li>
                    </ul>
                </div>
                <div class="container" style="height: 50px;"></div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <img src="plugins/zw/客服log2.png" alt="">
            </div>
        </div>

    </div>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

</body>
</html>